<template>
  <div class="app-container">
    <div class="header">
      <el-form :inline="true" :model="queryParams" ref="ruleFormRef">
        <el-form-item label="部门名称" prop="deptName">
          <el-input
            v-model="queryParams.deptName"
            placeholder="请输入部门名称"
            @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status" align="center">
          <el-select
            v-model="queryParams.status"
            placeholder="部门状态"
            clearable
            @keyup.enter.native="getList"
          >
            <el-option
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList" :icon="Search">查询</el-button>
          <el-button icon="Refresh" @click="reset(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="footer">
      <div class="util">
        <el-button type="primary" icon="Plus" v-hasPermi="['system:dept:add']" @click="addHandler"
          >新增部门</el-button
        >
        <el-button type="info" plain icon="Sort" @click="toggleExpandAll"> 展开/折叠</el-button>
      </div>

      <div class="table-inner">
        <el-table
          v-if="refreshTable"
          :default-expand-all="isExpandAll"
          v-loading="loading"
          row-key="deptId"
          :data="tableData"
          style="width: 100%"
          border
        >
          <el-table-column prop="deptName" label="部门名称" align="left" width="200" />
          <el-table-column prop="orderNum" label="排序" width="60" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="scope">
              <DictTag :options="dict.type.sys_normal_disable" :value="scope.row.status"></DictTag>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话号码" align="center" width="150" />
          <el-table-column prop="email" label="电子邮箱" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="center" width="180" />
          <el-table-column prop="operator" label="操作" width="250px" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                icon="Plus"
                @click="addHandler({ parentId: scope.row.deptId })"
                v-hasPermi="['system:dept:add']"
              >
                新增
              </el-button>
              <el-button
                type="success"
                size="small"
                icon="Edit"
                @click="editHandler(scope.row)"
                v-hasPermi="['system:dept:edit']"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.parentId != 0"
                @click="handleDelete(scope.row)"
                type="danger"
                size="small"
                icon="Delete"
                v-hasPermi="['system:dept:remove']"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <DeptDialog ref="deptDialog" @getList="getList" />
  </div>
</template>

<script lang="ts" setup>
  import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import { getCurrentInstance, nextTick, onMounted, reactive, ref } from 'vue'
  import { reqDeptDeleteUrl, reqDeptListUrl } from '@/api/system/dept'
  import DeptDialog from './components/deptDialog.vue'
  import DictTag from '@/components/DictTags/index.vue'

  const tableData = ref()
  const loading = ref(true) // 遮罩层
  const dialogVisible = ref(false)
  const deptDialog = ref()
  const ruleFormRef = ref<FormInstance>()
  const refreshTable = ref(true) // 重新渲染表格状态
  const isExpandAll = ref(true) // 是否展开，默认全部折叠

  const { proxy }: any = getCurrentInstance()
  const queryParams = ref({
    deptName: undefined,
    status: undefined,
  })

  onMounted(async () => {
    await getList()
    setTimeout(async () => {
      loading.value = false
    }, 500)
  })

  const getList = async () => {
    console.log('submit!', queryParams)
    loading.value = true
    setTimeout(async () => {
      await reqDeptListUrl(queryParams.value).then((req: any) => {
        if (req.code === 200) {
          tableData.value = proxy.$handleTree(req.data, 'deptId')
        } else {
          proxy.$modal.msgError(req.message)
        }
      })
      loading.value = false
    }, 500)
  }

  //重置
  const reset = (formEl: FormInstance | undefined) => {
    loading.value = true
    proxy.$resetForm(formEl)
    Object.keys(queryParams.value).forEach((key) => {
      queryParams.value[key] = null
    })
    /*再次查询*/
    getList()
    setTimeout(() => {
      loading.value = false
    }, 500)
  }

  //添加部门
  const addHandler = (row: any) => {
    deptDialog.value.show(row)
  }
  //修改部门
  const editHandler = (row) => {
    deptDialog.value.show(row)
  }

  const handleDelete = (row) => {
    proxy.$modal
      .confirm('你确定要删除当前项吗?')
      .then(async () => {
        let result = await reqDeptDeleteUrl(row.deptId)
        if (result.code == 200) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          await getList() /*刷新*/
        } else {
          ElMessage({
            type: 'error',
            message: result.message != null ? result.message : '删除失败',
          })
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
  }

  /*菜单折叠*/
  const toggleExpandAll = () => {
    refreshTable.value = false
    isExpandAll.value = !isExpandAll.value
    /*再次对数据进行渲染*/
    nextTick().then(() => {
      refreshTable.value = true
    })
  }
</script>

<script lang="ts">
  export default {
    dicts: ['sys_normal_disable'],
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
